<template>
  <el-upload
    class="wh"
    :file-list="fileList"
    action="/api/shop/admin/upload"
    name="uploadFile"
    :limit="limit"
    :class="disabled ? 'upload-disabled' : ''"
    :before-upload="onBeforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-remove="handleRemove"
    :on-preview="handlePreview"
    :on-exceed="handleExceed"
    :disabled="disabled || loading"
  >
    <div slot="trigger">
      <slot v-if="slots.default" />
      <el-button v-else size="large" :loading="loading" :icon="Upload">
        上传文件
      </el-button>
    </div>
  </el-upload>
  <div class="tips" v-for="(item, index) in tips" :key="index">
    <span v-if="tips.length > 1">{{ index + 1 }}.</span>
    <span>{{ item }}</span>
  </div>
</template>
<script setup>
import { ref, computed, useSlots } from "vue";
import { deepClone } from "@/utils/index.js";
import { Upload } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useTrigger } from "@/hooks/useValidatorRules.js";
const { emitTrigger } = useTrigger();
const slots = useSlots();
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: null,
  },
  accept: {
    type: Array,
    default: [],
  },
  tips: {
    type: Array,
    default: [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  limit: {
    type: [String, Number],
    default: 1,
  },
  type: {
    type: String,
    default: "Array",
  },
});
const loading = ref(false);
const fileList = computed({
  get: () => {
    let list = [];
    if (props.modelValue && props.type === "Array") {
      list = props.modelValue || [];
    } else if (props.modelValue && props.type === "String") {
      list = props.modelValue.split(",");
    }
    if (typeof list === "string") {
      list = props.modelValue.split(",");
    }
    const files = (list || []).map((x) => {
      return {
        name: getFileName(x),
        url: x,
      };
    });
    return files;
  },
  set: (data) => {
    const fileUrl = (data || []).map((x) => x.url);
    if (props.type === "Array") {
      emits("update:modelValue", fileUrl);
    } else if (props.type === "String") {
      emits("update:modelValue", fileUrl.join(","));
    }
    emitTrigger();
  },
});
const onBeforeUpload = () => {
  loading.value = true;
};
const handlePreview = (file) => {
  window.open(file.url);
};
const handleError = (response) => {
  loading.value = false;
};
const handleExceed = () => {
  ElMessage.warning(`超出上传最大限制${props.limit}`);
};
const handleSuccess = (response) => {
  const result = response.result;
  const list = fileList.value;
  list.push({
    name: `${result.name}${result.suffix}`,
    url: result.url,
  });
  fileList.value = list;
  loading.value = false;
};

const handleRemove = (file) => {
  const files = deepClone(fileList.value);
  fileList.value = files;
};

const getFileName = (url) => {
  try {
    if (url) {
      return url.split("/").pop();
    }
  } catch (error) {
    return "附件";
  }
};
</script>
<style lang="less" scoped>
.upload-disabled {
  :deep(.el-upload) {
    display: none;
  }
}

.tips {
  font-size: 12px;
  line-height: 22px;
  color: #8d9297;
}
:deep(.el-upload-list__item-name) {
  padding-right: 4px;
}
</style>